<template>
  <div>
    <el-badge
      v-for="(question, idx) in randomQuestion"
      :key="idx"
      :value="fill0(idx + 1)"
      class="item"
      :type="getType(idx)"
      @click.native="goToNum(idx)"
    >
    </el-badge>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import tools from "../../api/audit/tools";
export default {
  data() {
    return {};
  },
  async mounted() {
    if (!this.randomQuestion) {
      await this.randomQuestionDataFn();
    }
  },
  computed: {
    ...mapState("test/questions", ["index", "randomQuestion"]),
    // ...mapGetters("test/questions", ["getterCurrentQuestion"]),
  },
  methods: {
    ...mapMutations("test/questions", ["SET_INDEX"]),
    ...mapActions("test/questions", ["randomQuestionDataFn"]),
    goToNum(idx) {
      this.SET_INDEX(idx);
    },
    getType(idx) {
      let type = "info";
      let questionObj = this.randomQuestion[idx];
      if (questionObj.userAnswers) {
        if (questionObj.userAnswers == questionObj.answers) {
          type = "success";
        } else {
          type = "danger";
        }
      }
      if (this.index == idx) {
        type = "primary";
      }

      return type;
    },
  },

  mixins: [tools],
};
</script>

<style scoped>
</style>